<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-page-mode" content="app"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>66Play</title>
<style>
    *{padding: 0;margin: 0;}
    body{ padding: 0;margin: 0;}
    ul li{
           list-style:none;
    }
    #myPopup{
          box-sizing:border-box;
          -webkit-box-sizing:border-box;
          width:100%;
          position:absolute;
          left:50%;
          top:0;
          width:90%;
          margin-left:-45%;
          z-index:100;
          display:none;
    }
    .related-videos{
          padding:0;margin:0;
    }
    .related-videos h1{
           padding:0px 10px;
           margin:0;
           height:30px;

           
    }
    .related-videos h1 em{
           font-size:0.9rem;
           color:#fff;
           font-family:"微乳雅黑";
           font-style:normal;
           line-height:30px;
           display:block;
           float:left;
    }
    .related-videos h1 .replay{
          float:right;
          font-size:0.8rem;
          margin-top:5px;
    }
    .related-videos h1 .replay img{
         display:inline-block;
         float:left;
    }
    .related-videos h1 .replay span{
          color:#fff;
          display:inline-block;
          margin-left:10px;
          font-size:0.9rem;
          margin-top:3px;
    }
    .related-videos-ul{
          padding:5px;
    }
    .related-videos-ul li{
         overflow: hidden;
         width:48%;
         float:left;
         margin-left:3px;
         margin-bottom:4px;
    }
    .related-videos-ul li a{
          text-decoration:none;
    }
    .related-videos-ul li img{
          display:block;
    }
    .related-video-img span.related-video-name{
         color:#fff;
         text-decoration:none;
         font-size:0.7rem;
         white-space: nowrap;
         overflow: hidden;
        text-overflow:ellipsis;
        width: 100%;
    }
    .related-video-name{
         padding-left:3px;

    }
    .popbg {
          width:100%;
          background:#000;
          z-index:10;
          position:absolute;
          left:0;
          top:0;
          display:none;
          opacity:0.3;
    }
</style>
</head>

<body onKeyDown="KeyOn_Space(event);" style="width: 100%;height: 100%;margin: 0;">
<script type="text/javascript" src="__ASSET__/Home/player/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/knockout-2.3.0.js"></script>
<!-- <script type="text/javascript" src="__ASSET__/Home/player/js/jwplayer/jwplayer.js"></script> -->
<script type="text/javascript" src="__ASSET__/Home/mobile3/js/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
    {:C('GLOBAL_BDHM')}
</script>
<div id="myElement">Loading the player...</div>
 <!--视频播放完成弹窗S-->
<!-- ko if:recommendShow() -->
<div id="myPopup">
    <div class="related-videos">
        <h1>
            <em>相关视频</em>
            <span class="replay" onclick="replay()">
                <img src="__PUBLIC__/Home/player/match/images/replay.png" width="20" height="20"/><span>重播</span>
            </span>
        </h1>
        <ul class="related-videos-ul">
        </ul>
    </div>
</div>
<div class="popbg"></div>
<!-- /ko -->
<!--视频播放完成弹窗E-->
<script type="text/javascript">
    load_data=true;
    window.jwplayer_path = "__ASSET__/Home/player/js/jwplayer";
    window._COMMON = {
        PUBLIC : "__ASSET__",
    };
    var video = {$video|json_encode};
    $(function(){
        init_jwplayer();
        
    })
    function changHeight (){
         var get_width=Math.ceil($(window).width());
         var get_height=Math.ceil((get_width*9)/16);
         $("#myPopup").css({"height":get_height});
         $(".popbg").css({"height":get_height});
         if(get_width>370 && get_width<400){
              $(".related-videos-ul li img").css("height","60px"); 
         }else if( get_width>400){
              $(".related-videos-ul li img").css("height","72px");
         }else{
              $(".related-videos-ul li img").css("height","48px"); 
         }
         
    }
    function   replay  () {
           $(".popbg").hide();
           $("#myPopup").hide();
           jwplayer("myElement").play(true)
    }
    function init_jwplayer(){
        jwplayer("myElement").setup({
            flashplayer: "__ASSET__/Home/ui3/js/jwplayer/jwplayer.flash.swf",
            sources : getVideoSource(video),
            image: "{$video.thumb}",
            title: '',
            description: "",

            controlbar: "over",  //控制条位置

            screencolor: "#fff",   //播放器颜色
            // stretching: "fill",    //画面自适应
            repeat:false,       //重复播放
            autostart:{$autoplay},         //自动播放
            events:{
                    onComplete: function(){
                           $(".popbg").show();
                           $("#myPopup").show();
                           changHeight();
                    },
                    onReady: function(){
                        if(load_data==true){
                               var recommendUrl = "{:U('VideoPlay/recommend', ['game_id' => $video['game_id']])}";
                               $.get(recommendUrl,function(data){
                                    if(data.state == 0){
                                        load_data=false;
                                         var video_str="";
                                        $.each(data.data, function(index, el) {
                                                video_str+='<li>\
                                                        <a href="/video-'+el.id+'"  target="_blank">\
                                                            <div class="related-video-img">\
                                                                <img src="'+el.thumb+'" width="100%"/>\
                                                                <span class="related-video-name">'+el.title+'</span>\
                                                            </div>\
                                                        </a>\
                                                    </li>'
                                         });
                                        $(".related-videos-ul").append(video_str);
                                    }
                               })
                        }
                        $("#myElement_logo").remove();
                        if (parent) {
                            parent.playerReady();
                        }
                    },

                },
            width: "100%",
            aspectratio:"16:9",
        });
    }
    function KeyOn_Space(ev){
        ev = ev || window.event;    
        var code = (ev.keyCode || ev.which);   
        if(code == 32) {  
            jwplayer('myElement').pause();  
        }
    }

    var played = true;
    var setPlayUrl = "{:U('/Api/Video/setPlay', array('id' => $video['id'], 'appid' => $appid))}";
    if (!played) {
        $.get(setPlayUrl);
        played = true;
    }
    function getVideoSource(video) {
        var list = [];
        if (video.dpi_levels && video.dpi_levels.length > 0) {
            $.each(video.dpi_levels, function(index, el) {
                list.push({
                    label : el.dpi,
                    file : el.uri,
                    default : false,
                });
            });
        }
        list[list.length-1].default = true;
        return list;
    }

</script>
</body>
</html>